<template>
  <div>
    <div id="app">
      <div id="big">
        <ul>
          <li>
            <img :src="img[idx]" alt="" @click="imgs" />
          </li>
        </ul>
      </div>
      <div id="small">
        <ol>
          <li
            v-for="(item, index) in img"
            :class="{ active: idx == index }"
            :key="index"
            @click="tab(index)"
          >
            <img v-bind:src="item" alt="" />
          </li>
        </ol>
      </div>
      <div class="btn">
        <a id="btnleft" @click="prev">&lt;</a>
        <a id="btnright" @click="next">&gt;</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      img: ["imgs/one.jpg", "imgs/two.jpg", "imgs/three.jpg", "imgs/four.jpg"],
      idx: 0, //设置了一个变量   让他等于图片的角标
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    tab(index) {
      this.idx = index; //设置的变量等于角标
    },
    next(e) {
      this.idx++;
      if (this.idx == 4) {
        this.idx = 0;
      }
    },
    prev(e) {
      this.idx--;
      if (this.idx < 0) {
        this.idx = 3;
      }
    },
    imgs(e) {
      console.log(e.target);
      console.log(this);
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  border: none;
}

#app {
  width: 700px;
  height: 600px;
  background: #000;
  margin: 10px auto;
  position: relative;
  overflow: hidden;
}

#big {
  width: 700px;
  height: 500px;
}

#big ul li,
#big ul li img {
  position: absolute;
  left: 75px;
  top: 0;
  width: 400px;
  height: 500px;
}

#big ul li {
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#small {
  width: 700px;
  height: 100px;
  position: absolute;
}

#small li,
#small li img {
  width: 100px;
  height: 100px;
  background-size: 100%;
  background: pink;
  float: left;
}

#small li {
  width: 175px;
  height: 100px;
  background: #000;
  opacity: 0.4;
  z-index: 999;
}

#small li.active {
  width: 175px;
  height: 100px;
  background: #000;
  opacity: 1;
  z-index: 0;
}

#btnleft,
#btnright {
  font-size: 60px;
  position: absolute;
  top: 40%;
  color: blue;
}

#btnleft {
  left: 5px;
}

#btnright {
  right: 5px;
}
</style>
